<template>
	<view>
		<uni-nav-bar fixed="true" leftWidth="400rpx" height="120rpx" statusBar="true" backgroundColor="#f5f5f5">
			<view class="head" slot="left" @click="personal">
				<image :src="avatar" class="avatar" mode="aspectFill"></image>
				<text class="username">
					{{ username }}
				</text>
			</view>
		</uni-nav-bar>
		<view>
			<view class="">
				<uni-swipe-action :key="this.$store.state.timer">
					<uni-swipe-action-item :right-options="options" v-for="(chat,index) in chatList"
						:key="chat.user.uid" @click="delete_chat(index)">
						<uni-list :border="false">
							<uni-list-chat class="chat_list" :title="chat.user.username" :note="getLatestMessage(chat)"
								:time="getLatestDate(chat)" :badge-text="chat.unRead" :avatar="chat.user.avatar" link
								:key="chat.user.uid" avatarCircle
								@click="chatWindow(chat.user.uid,chat.user.username,index)">
							</uni-list-chat>
						</uni-list>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}]
			}
		},
		computed: {
			chatList() {
				return this.$store.state.chatList
			},
			avatar() {
				return this.$store.state.user.avatar
			},
			username() {
				return this.$store.state.user.username
			}
		},
		methods: {
			//查看个人资料
			personal() {
				//TODO
			},
			//进入聊天窗口
			chatWindow(uid, name, index) {
				let self = this
				uni.navigateTo({
					url: "../chat/chat?uid=" + uid + "&name=" + name,
					success() {
						self.$store.commit("clearUnread", index)
					}
				})
			},

			//删除聊天列表项
			delete_chat(index) {
				console.log("delete")
				this.$store.commit("deleteChat", index)
			},
			//获取最新消息的data
			getLatestMessage(chat) {
				// console.log(chat)
				let len = chat.messageList.length
				if (len === 0) return
				if (chat.messageList[len - 1].type == 1)
					return chat.messageList[len - 1].data;
				else if (chat.messageList[len - 1].type == 2)
					return "[图片]";
			},
			//获取最新消息的发送时间
			getLatestDate(chat) {
				let len = chat.messageList.length
				if (len === 0) return
				return this.$util.convertTime(chat.messageList[len - 1].sendDate);
			}
		},
		onShow() {
			// this.avatar = this.$store.state.user.avatar
			// this.$store.commit("init", this.$socket)
			// this.username = this.$store.state.user.username
		},
	}
</script>

<style scoped>
	.username {
		padding-left: 15rpx;
		font-size: 35rpx;
	}

	.head {
		display: flex;
		align-items: center;
	}

	.avatar {
		margin-left: 15rpx;
		height: 80rpx;
		width: 80rpx;
		border-radius: 50%;
	}

	.addIcon {
		float: right;
		right: 20rpx;
	}


	.messageList {
		display: flex;
		height: 140rpx;
		border-bottom: 1rpx #e3e3e3 solid;
		line-height: 140rpx;
		align-items: center;
	}

	.messageAvatar {
		margin-left: 35rpx;
		border-radius: 15rpx;
		height: 100rpx;
		width: 100rpx;
	}

	.messageName {
		padding-left: 35rpx;
	}

	.search {
		height: 60rpx;
		line-height: 60rpx;
		margin: 20rpx 40rpx;
		text-align: center;
		background-color: #F5F5F5;
		font-size: 30rpx;
		color: #B2B4C0;
	}

	.chat_list {
		height: 135rpx;

	}
</style>
